import { t } from 'i18next'
import { FC, useRef, useState } from 'react'
import { SelectedIcon, StyledMenuWrap, StyledPopup } from './style'
import { Trigger, TriggerInstance } from '@kedacom/react-next'
import { useTvWallStore } from '../store'
import shallow from 'zustand/shallow'
import Alert from '@/components/Alert'
import { TvWallMemberItemEntity } from '@/api/manager/tvwall/interface'
import { useMccStore } from '@/pages/manager/store'
import { useAutoVmpStore } from '@/components/AutoVmpDialog/store'
import { Vmp } from '@/api/manager/vmp/interface'

type BoxMenuProps = {
	/**位置*/
	index: number
	/**数据 */
	boxInfo: TvWallMemberItemEntity
	/**是否显示设置 */
	is_show_setting: boolean
	handleSetActive: (flag: boolean) => void
}
export const BoxSetting: FC<BoxMenuProps> = ({ boxInfo, is_show_setting, index, handleSetActive }) => {
	const { update, show_mt_name, boxDetailVOsSource, changeTVWallChannel, removeStreamDom } = useTvWallStore(
		(state) => ({
			update: state.update,
			correct_style: state.correct_style,
			show_mt_name: state.show_mt_name,
			boxDetailVOsSource: state.boxDetailVOsSource,
			changeTVWallChannel: state.changeTVWallChannel,
			removeStreamDom: state.removeStreamDom,
		}),
		shallow
	)
	const { meetingType } = useMccStore(
		(state) => ({
			meetingType: state.mccInfo.meetingType,
			meetingMoid: state.mccInfo.meetingMoid,
			superMtNum: state.mccInfo.superMtNum,
		}),
		shallow
	)
	const [isShowChannel] = useState<boolean>(false) /**是否显示通道选择 */
	const triggerRef = useRef<TriggerInstance>(null) /**下拉选择框 */
	const { member_type } = boxInfo
	const BoxMenu = () => {
		if (meetingType !== 2) {
			return (
				<>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('管理方跟随'), 3)}>
						{member_type === 3 && <SelectedIcon></SelectedIcon>}
						<span>{t('管理方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('发言方跟随'), 2)}>
						{member_type === 2 && <SelectedIcon></SelectedIcon>}
						<span>{t('发言方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('会议轮询跟随'), 4)}>
						{member_type === 4 && <SelectedIcon></SelectedIcon>}
						<span>{t('会议轮询跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('内容共享跟随'), 10)}>
						{member_type === 10 && <SelectedIcon></SelectedIcon>}
						<span>{t('内容共享跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('选看画面合成'), 6)}>
						{member_type === 6 && <SelectedIcon></SelectedIcon>}
						<span>{t('选看画面合成')}</span>
					</div>
					<div className="item-line"></div>
					<div className="rc_box-menu" onClick={handleVoice}>
						{t('音量调节')}
					</div>
					<div className="item-line"></div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('单通道轮询'), 5)}>
						{member_type === 5 && <SelectedIcon></SelectedIcon>}
						<span>{t('单通道轮询')}</span>
					</div>
					{meetingType === 1 && (
						<div className="rc_box-menu" onClick={() => onTypeSelect(t('自主多画面'), 8)}>
							{member_type === 8 && <SelectedIcon></SelectedIcon>}
							<span>{t('自主多画面')}</span>
						</div>
					)}
					{meetingType !== 1 && (
						<div className="rc_box-menu" onClick={() => onTypeSelect(t('开启四分屏'), 9)}>
							{member_type === 9 && <SelectedIcon></SelectedIcon>}
							<span>{t('开启四分屏')}</span>
						</div>
					)}
					{isShowChannel && (
						<>
							<div className="item-line"></div>
							<div className="rc_box-menu" onClick={() => onTypeSelect(t('通道选择'), 4)}>
								{t('通道选择')}
							</div>
						</>
					)}
				</>
			)
		}
		if (meetingType === 2) {
			return (
				<>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('管理方跟随'), 3)}>
						{member_type === 3 && <SelectedIcon></SelectedIcon>}
						<span>{t('管理方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('发言方跟随'), 2)}>
						{member_type === 2 && <SelectedIcon></SelectedIcon>}
						<span>{t('发言方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('会议轮询跟随'), 4)}>
						{member_type === 4 && <SelectedIcon></SelectedIcon>}
						<span>{t('会议轮询跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('内容共享跟随'), 10)}>
						{member_type === 10 && <SelectedIcon></SelectedIcon>}
						<span>{t('内容共享跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('选看画面合成'), 6)}>
						{member_type === 6 && <SelectedIcon></SelectedIcon>}
						<span>{t('选看画面合成')}</span>
					</div>
					<div className="item-line"></div>
					<div className="rc_box-menu" onClick={handleVoice}>
						{t('音量调节')}
					</div>
					<div className="item-line"></div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('单通道轮询'), 5)}>
						{member_type === 5 && <SelectedIcon></SelectedIcon>}
						<span>{t('单通道轮询')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('开启四分屏'), 9)}>
						{member_type === 9 && <SelectedIcon></SelectedIcon>}
						<span>{t('开启四分屏')}</span>
					</div>
				</>
			)
		}
	}
	const onMouseLeave = () => {
		triggerRef.current?.close()
		handleSetActive(false)
	}
	const onMouseEnter = () => {
		triggerRef.current?.open()
		handleSetActive(true)
	}
	const onTypeSelect = (_name: string, operateType: number) => {
		handleSetActive(false)
		/**关闭下拉选择 */
		triggerRef.current?.close()
		/**清空通道 */
		if (operateType === 0) {
			handleClearHduId(operateType)
			return false
		}
		if (meetingType === 2) {
			if (operateType === 4 || operateType === 6) {
				Alert(t('超元RTC会议暂不支持此功能'))
				return
			}
		}
		if (
			operateType === 2 ||
			operateType === 3 ||
			operateType === 4 ||
			operateType === 6 ||
			operateType === 10 ||
			operateType === 11
		) {
			handleSendMT(operateType)
			return false
		}
		if (operateType === 5 /**单通道轮询 */) {
			update({ isSinglePollOpen: true, operateBoxInfo: boxInfo, operateBoxInfoIndex: index })
		}
		if (operateType === 8 /**自主多动画*/) {
			let _init_data: Vmp = {
				id: '',
				name: '',
				mode: 2,
				show_mt_name: 1,
				layout: 0,
				members: [],
				state: 0,
				voice_hint: 0,
				broadcast: 0,
				except_self: 0,
			}
			if (boxInfo.vmp) {
				_init_data = new Vmp(boxInfo.vmp)
			}
			// window.TS.mcc.tvwall.wallBox.reactInitVmp(_init_data)
			useAutoVmpStore.setState({
				isOpen: true,
				mode: 'setting',
				data: _init_data,
				onClose: () => {
					useMccStore.getState().setCurPage('tvwall')
					useAutoVmpStore.getState().reset()
				},
				onConfirm: (_data) => {
					useTvWallStore.getState().handleSendChannelVmp(_data)
				},
			})
			update({ operateBoxInfo: boxInfo, operateBoxInfoIndex: index })
		}
		if (operateType === 9) {
			update({
				isFourScreenOpen: true,
				operateBoxInfo: boxInfo,
				operateBoxInfoIndex: index,
			})
			if (boxInfo) {
				if (member_type !== 9) {
					/**(1)存在数据(2)member_type不为9 */
					/**初始化当前未设定空盒子*/
					handleSendFourScreen()
					removeStreamDom()
				} else {
				}
			} else {
				/**初始化当前未设定空盒子(刚进入会议当前盒子上面并没有数据)*/
				handleSendFourScreen()
				removeStreamDom()
			}
		}
	}
	const handleSendMT = async (type: number) => {
		const _members = boxDetailVOsSource
			.map((item) => {
				if (item.hdu_id === boxInfo.hdu_id) {
					return { member_type: type, hdu_id: boxInfo.hdu_id }
				}
				return null
			})
			.filter(Boolean)
		const params = {
			mode: 1,
			show_mt_name: show_mt_name,
			batch_poll: null,
			members: _members,
		}
		/**更改通道 */
		changeTVWallChannel(params)
		/**移除多流 */
		removeStreamDom()
	}
	/**清空通道 */
	const handleClearHduId = async (type: number) => {
		update({ operateBoxInfo: boxInfo, operateBoxInfoIndex: index })
		const _members = boxDetailVOsSource
			.map((item) => {
				if (item.hdu_id === boxInfo.hdu_id) {
					return { member_type: 1, hdu_id: boxInfo.hdu_id, mt_id: '' }
				}
				return null
			})
			.filter(Boolean)
		const params = {
			mode: 1,
			show_mt_name: show_mt_name,
			batch_poll: null,
			members: _members,
		}
		changeTVWallChannel(params) /**更改通道 */
		removeStreamDom() /**移除多流 */
	}
	/**先切分四分屏 */
	const handleSendFourScreen = async () => {
		const _members = boxDetailVOsSource
			.map((item) => {
				if (item.hdu_id === boxInfo.hdu_id) {
					return { member_type: 9, hdu_id: boxInfo.hdu_id, spilt: [] }
				}
				return null
			})
			.filter(Boolean)
		const params = {
			mode: 1,
			show_mt_name: show_mt_name,
			batch_poll: null,
			members: _members,
		}
		/**更改通道 */
		changeTVWallChannel(params)
	}
	/**音量调节*/
	const handleVoice = () => {
		update({ isOpenVolumeModal: true, operateBoxInfo: boxInfo, operateBoxInfoIndex: index }) /**开启音频弹框 */
	}
	return (
		<StyledMenuWrap>
			<div className="operate" onMouseLeave={onMouseLeave}>
				<Trigger
					ref={triggerRef}
					popup={<StyledPopup>{BoxMenu()}</StyledPopup>}
					popupPlacement="bottomStart"
					container={() => document.getElementsByClassName('mcc-tvwall-modal')[0] as HTMLElement}
				>
					<span className="set" title={t('设置通道')} onClick={onMouseEnter}></span>
				</Trigger>
				{!(boxInfo.member_type === 1 && !boxInfo.mt_id) && (
					<span
						className="delete"
						onClick={() => onTypeSelect(t('清空通道'), 0)}
						title={t('清空通道')}
					></span>
				)}
			</div>
		</StyledMenuWrap>
	)
}
